<template>
  <!-- 我的购物车顶部界面 -->
  <div class="personHeadMoudle">
    <PersonHead />
  </div>

  <!-- 我的购物车主体界面 -->
  <div class="personDataModule">
    <!-- 我的购物车界面导航 -->
    <div class="personMenuModule">
      <PersonMenu />
    </div>

    <!-- 我的购物车界面导航 -->
    <div class="dataModule">
      <div class="personHandleModule">
        <span>商品查询:</span>
        <el-input
          v-model="offerIDSearch"
          style="width: 20%"
          placeholder="请输入商品订单号"
          clearable
        />
        <el-button type="primary" :icon="Search" @click="searchCart"
          >查询ID</el-button
        >
      </div>

      <div class="personTableModule">
        <el-table
          :data="tableData"
          :header-cell-style="{
            color: '#000',
            backgroundColor: '#e7f8fd',
            textAlign: 'center',
          }"
          :row-style="{ height: '90px' }"
          :cell-style="{
            textAlign: 'center',
          }"
        >
          <el-table-column property="offerID" width="160px" label="商品ID" />
          <el-table-column label="商品图片">
            <template #default="data">
              <img
                :src="data.row.offerImage"
                alt="商品展示图片"
                style="height: 60px; width: auto"
              />
            </template>
          </el-table-column>
          <el-table-column property="offerName" label="商品名称" />
          <el-table-column property="offerStyle" label="商品类别" />
          <el-table-column property="offerLocal" label="商品地址" />
          <el-table-column property="offerDegree" label="商品程度" />
          <el-table-column property="offerUser" label="售卖用户" />
          <el-table-column property="finalPrice" label="最终价格" />
          <el-table-column width="200px" label="操作">
            <template #default="scope">
              <el-button
                type="success"
                text
                @click="rowNow(scope.row), (paymentModule = true)"
                >购买</el-button
              >
              <el-button type="danger" text @click="deleteCart(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页栏部分 -->
      <div class="pagiNation">
        <el-pagination
          :page-size="5"
          :pager-count="5"
          :current-page="pageNum.value"
          layout="prev, pager, next"
          :total="totalNum"
          @current-change="currentChange"
        />
      </div>
    </div>
  </div>

  <!-- 个人界面底栏 -->
  <div class="personButtomModule">
    <PersonButtom />
  </div>

  <!-- 支付添加地址弹窗 -->
  <el-dialog v-model="paymentModule" title="商品支付框">
    <div class="paymentModule">
      <div class="messageModule">
        <div class="inputModule">
          <span>详细收货地址：</span>
          <el-input
            v-model="userLocal"
            style="width: 60%"
            :rows="2"
            type="textarea"
            placeholder="请输入详细收货地址的信息"
          />
        </div>
        <div class="payImage"></div>
      </div>

      <div class="buttonModule">
        <el-button type="success" @click="buyCart(tableRow)"
          >确认支付</el-button
        >
      </div>
    </div>
  </el-dialog>
</template>

<script>
import PersonHead from "@/components/PersonHead.vue";
import PersonMenu from "@/components/PersonMenu.vue";
import PersonButtom from "@/components/PersonButtom.vue";
import { Search } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { ref, onMounted } from "vue";
import request from "@/request/axios";

export default {
  components: { PersonHead, PersonMenu, PersonButtom },

  setup() {
    let offerIDSearch = ref(null);
    let tableData = ref();
    let tableRow = ref();
    let pageNum = ref(1);
    let totalNum = ref(0);
    let userLocal = ref(null);
    let paymentModule = ref(false);

    const cartTable = () => {
      request
        .post("/person/cartList", {
          pageNum: pageNum.value,
          pageSize: 5,
          cartUser: JSON.parse(localStorage.getItem("user")).data.userID,
          offerID: offerIDSearch.value,
        })
        .then((res) => {
          if (res.code === "200") {
            tableData.value = res.data.data;
            totalNum.value = res.data.total;
          } else {
            tableData.value = [];
            ElMessage.warning(res.msg);
          }
        });
    };

    onMounted(cartTable);

    const searchCart = () => {
      cartTable();
      offerIDSearch.value = null;
    };

    const deleteCart = (row) => {
      request
        .post("/person/cartDelete", { offerID: row.offerID })
        .then((res) => {
          if (res.code === "200") {
            ElMessage.success("商品信息删除成功");
            cartTable();
          } else {
            ElMessage.error(res.msg);
          }
        });
    };

    const rowNow = (row) => {
      tableRow.value = row;
    };

    const buyCart = (row) => {
      console.log(row);
      if (userLocal.value != null) {
        request
          .post("/person/cartBuy", {
            offerID: row.offerID,
            offerName: row.offerName,
            offerImage: row.offerImage,
            offerStyle: row.offerStyle,
            offerState: "待发货",
            offerLocal: row.offerLocal,
            offerDegree: row.offerDegree,
            finalPrice: row.finalPrice,
            userLocal: userLocal.value,
            offerUser: row.offerUser,
            cartUser: JSON.parse(localStorage.getItem("user")).data.userID,
          })
          .then((res) => {
            if (res.code === "200") {
              ElMessage.success("商品购买成功");
              request
                .post("/person/cartDelete", { offerID: row.offerID })
                .then((res) => {
                  if (res.code === "200") {
                    cartTable();
                  } else {
                    ElMessage.error(res.msg);
                  }
                });
              tableRow = null;
              paymentModule.value = false;
            } else {
              ElMessage.error("商品购买失败");
            }
          });
      } else {
        ElMessage.warning("收货地址不可为空");
      }
    };

    const currentChange = (current) => {
      pageNum.value = current;
      cartTable();
    };

    return {
      Search,
      tableData,
      tableRow,
      pageNum,
      totalNum,
      offerIDSearch,
      paymentModule,
      searchCart,
      cartTable,
      deleteCart,
      rowNow,
      buyCart,
      userLocal,
      currentChange,
    };
  },
};
</script>

<style>
body {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  margin: 0;
}

.dataModule {
  display: flex;
  flex-direction: column;
  width: 80%;
  height: 100%;
  background-color: #fff;
  border-inline: 2px solid #cacaca;
}

.paymentModule {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 350px;
}

.messageModule {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 85%;
  background-color: antiquewhite;
}

.buttonModule {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 15%;
}

.inputModule {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 60%;
  height: 100%;
}

.payImage {
  display: flex;
  width: 40%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
</style>